// 后台页面的待配送订单页面
<template>
  <div>
    <img :src="url" alt="" />
    <div class="container">
      <OrderPage :data="orders.records"></OrderPage>
    </div>
    <div class="pagination">
      <ul>
        <li class="pre" :class="{ disabled: curpage === 1 }" @click="pre">&lt;</li>
        <li v-for="value in orders.display" :key="value" :class="{ active: curpage === value }" @click="curpage = value">{{ value }}</li>
        <li class="next" @click="next" :class="{ disabled: curpage === orders.pages }">&gt;</li>
      </ul>
    </div>
  </div>
</template>

<script>
import OrderPage from '@/components/page/orderpage.vue'
import imgurl from '@/assets/image/orderdelivered.png'
import { getOrder } from '@/api/index.js'
export default {
  components: {
    OrderPage
  },
  data() {
    return {
      url: imgurl,
      orders: {},
      curpage: 1
    }
  },
  methods: {
    async getbackorder(url, params) {
      const { data } = await getOrder(url, params)
      this.orders = data
      console.log(data)
    },
    pre() {
      if (this.curpage !== 1) {
        --this.curpage
      }
    },
    next() {
      if (this.curpage !== this.orders.pages) {
        ++this.curpage
      }
    }
  },
  watch: {
    curpage() {
      this.getbackorder('/api/back/backdeliveryorder', { page: this.curpage })
    }
  },
  created() {
    this.getbackorder('/api/back/backdeliveryorder', { page: 1 })
  }
}
</script>

<style lang="less" src="@/assets/css/backOrder.less" scoped></style>
